@red:blue;
@imp:red;

// 连字符变量名
@margin-bottom-size:20px;
// 驼峰变量名
@bottomSize:30px;

// less的变量可以取任意css属性的合法值
@border:3px solid pink;

// less 变量之间是可以相互引用的
// @aa:@bottomSize;
@border2:4px solid @red;

h1{
    color: @red;
    margin-bottom: @margin-bottom-size;
    padding-bottom: @bottomSize;
}
p{
    color: @red;
    margin-bottom: @margin-bottom-size;
    padding-bottom: @bottomSize;
    border: 1px solid @imp;
}

ul{
    border:@border;
}

li{
    background-color: @red;
}

@basePath:"../img";

.bi{
    background-image: url("@{basePath}/collect.png");
}

@select1:age;
.@{select1}{
    font-size: 20px;
}

#@{select1}{
    font-weight: bold;
}

@extendname:size;
.widget{
    font-@{extendname}:20px;
    background-@{extendname}:100%;
}

@size:20px;
@name1:size;

h5{
    font-@{name1}:@@name1;
}